<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="btn_wrapper">
          <span style="font-size:12px; color:pink;">说明:目前支持学科和关键字条件筛选</span>
          <button type="button" class="el-button el-button--success el-button--small" @click="$router.push('/questions/new')">
            <i class=" el-icon-edit"></i>
            <span>新增试题</span>
          </button>
        </div>
        <el-form size="small" label-width="80px">
          <!-- 第一行 -->
          <el-row>
            <el-col :span="6" inline="true">
              <el-form-item label="学科">
                <el-select v-model="form.subjectID" placeholder="请选择" style="width:100%;" @change="subjectChange($event)">
                  <el-option v-for="item in subjectIDList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" inline="true">
              <el-form-item label="二级目录">
                <el-select v-model="form.catalogID" placeholder="请选择" style="width:100%;">
                  <el-option v-for="item in directoryList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" inline="true">
              <el-form-item label="标签">
                <el-select v-model="form.tags" placeholder="请选择" style="width:100%;">
                  <el-option v-for="item in tagsList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" inline="true">
              <el-form-item label="关键字">
                <el-input v-model="form.keyword" placeholder="请输入内容">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row>
            <el-col :span="6" inline="true">
              <el-form-item label="试题类型">
                <el-select v-model="form.questionType" placeholder="请选择" style="width:100%;">
                  <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" inline="true">
              <el-form-item label="难度">
                <el-select v-model="form.difficulty" placeholder="请选择" style="width:100%;">
                  <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" inline="true">
              <el-form-item label="方向">
                <el-select v-model="form.direction" placeholder="请选择" style="width:100%;">
                  <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="index">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" inline="true">
              <el-form-item label="录入人">
                <el-select v-model="form.creatorID" placeholder="请选择" style="width:100%;">
                  <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row style="text-aline:right">
            <el-col :span="6" inline="true">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" inline="true">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" inline="true">
              <el-form-item label="城市">
                <el-select v-model="form.province" @change="pChange" placeholder="请选择" style="width:48%;margin-right:2%">
                  <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>

                <el-select v-model="form.city" collapse-tags style="width:50%;" placeholder="请选择">
                  <el-option v-for="(item, index) in citys" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" inline="true">
              <el-form-item style="text-align:right;">
                <el-button plain @click="clearAll">清除</el-button>
                <el-button type="primary" @click.native="search">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-alert style="margin-bottom:15px;" class="el-icon-info" :title="`数据一共 ${total} 条`" type="info" :closable="false">
        </el-alert>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{background: 'rgb(247, 244, 244)'}">
          <el-table-column prop="number" label="试题编号">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="106">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="103">
          </el-table-column>
          <el-table-column label="题型" width="103">
            <template #default="{ row }">
              {{ formatQuestionType(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="题干" width="260">
            <template #default="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="180">
            <template #default="{ row }">
              {{ row.addDate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="难度" width="103">
            <template #default="{ row }">
              {{ formatDifficulty(row.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column label="录入人" width="103">
            <template #default="{ row }">
              {{ row.creator }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="190">
            <template #default="{ row }">
              <el-button size="small" type="primary" icon="el-icon-view" @click="preview(row)" circle plain title="预览"></el-button>
              <el-button size="small" type="success" icon="el-icon-edit" circle plain title="修改" @click="$router.push({path:'/questions/new',query:{id:row.id}})"></el-button>
              <el-button size="small" type="danger" icon="el-icon-delete" circle plain title="删除" @click.native="removeTo(row)"></el-button>
              <el-button size="small" type="danger" icon="el-icon-check" circle plain title="加入精选" @click="join(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[5, 2, 3, 10]" :page-size="form.pagesize" :total="total" layout=" sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <QuestionsPreview :showQPDialog.sync="showQPDialog" :tableList="tableList" :list="list">
      <template v-if="tableList.questionType === '1'">
        <el-row>【题干】:</el-row>
        <el-row>
          <div v-html="tableList.question" style="color: blue"></div>
        </el-row>
        <el-row> 单选题 选项:&nbsp;&nbsp; (以下选中的选项为正确答案)</el-row>
        <el-row> </el-row>
      </template>
      <template v-else-if="tableList.questionType === '2'">
        <el-row>【题干】:</el-row>
        <el-row>
          <div v-html="tableList.question" style="color: blue"></div>
        </el-row>
        <el-row> 多选题 选项:&nbsp;&nbsp; (以下选中的选项为正确答案)</el-row>
        <el-row></el-row>
      </template>
      <template v-else-if="tableList.questionType === '3'">
        <el-row>【题干】:</el-row>
        <el-row>
          <div v-html="tableList.question" style="color: blue"></div>
        </el-row>
        <el-row> 简答题 (以下内容为正确答案)</el-row>
        <el-row> </el-row>
      </template>
    </QuestionsPreview>
  </div>
</template>

<script>
// 获取学科列表
import { simple as subjectsSimple } from '@/api/hmmm/subjects.js'
// 获取每科的目录列表
import { simple as directorySimple } from '@/api/hmmm/directorys'
// 获取每科的标签列表
import { simple as tagsSimple } from '@/api/hmmm/tags'
// 映射
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
// 获取录入人列表
import { simple as userSimple } from '@/api/base/users'
// 城市
import { provinces, citys } from '@/api/hmmm/citys'
// // 导入预览试题组件
import QuestionsPreview from '../components/directorys-add.vue'
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import dayjs from 'dayjs'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      // 筛选数据表单
      form: {
        subjectID: null, // 学科
        tags: null, // 标签
        catalogID: null, // 目录
        keyword: null, // 关键字
        questionType: null, // 试题类型
        creatorID: null, // 录入人
        direction: null, // 方向
        difficulty: null, // 难度
        remarks: null, // 题目备注
        city: null, // 区
        shortName: null, // 企业简称
        province: null, // 城市
        chkState: null, // 状态
        page: 1,
        pagesize: 5
      },
      // 定义学科列表空数组
      subjectIDList: [],
      // 二级目录
      directoryList: [],
      // 标签
      tagsList: [],
      questionType: questionType, // 试题类型
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      // 录入人
      userList: [],
      // 城市
      provinces: [],
      citys: [],
      total: 0, // 总数据条数,
      showQPDialog: false,
      // 表格数据
      tableData: [],
      // 题目预览中数据
      tableList: {},
      list: {}
    }
  },
  created () {
    // 学科列表
    this.getSubjectIDList()
    // 录入人
    this.getUserList()
    // 城市
    this.getProvinces()
    // 表格
    this.getTableList()
  },
  methods: {
    // 加入精选
    async join (row) {
      try {
        await this.$confirm('此操作将题目加入精选,是否继续?', '提示', { type: 'info' })
        await choiceAdd({ id: row.id, choiceState: 1 })
        this.$router.push('./choice')
        // window.localtion.href = '/choice'
        console.log('111', row)
        console.log('222', row.id)
        this.$message.success('加入成功')
        this.getTableList()
      } catch (error) {
        console.log(error)
      }
    },
    // 删除
    async removeTo (id) {
      const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // console.log(data)
      if (result === 'cancel') return
      await remove(id)
      // 处理最后一页数据全部删完后列表页码正确，但数据显示错误问题（刷新列表使用的是上次的页码）
      // 解决:计算最新页数=》总页码 = 数据总条数 / 每页条数
      const newPage = Math.ceil((this.total - 1) / this.pagesize)
      if (this.page > newPage) {
        // 纠正页码
        this.page = newPage
      }
      this.$message.success('删除成功')
      this.getTableList()
    },
    // 获取学科列表
    async getSubjectIDList () {
      const { data } = await subjectsSimple()
      console.log(data)
      this.subjectIDList = data
    },
    // 根据选中的学科获取二级目录和标签
    async subjectChange (id) {
      const res = await directorySimple({ params: { subjectID: id } })
      this.directoryList = res.data
      await tagsSimple({ params: { subjectID: id } })
      this.tagsList = res
    },
    // 根据映射关系转换题型、难度、状态
    formatDifficulty (difficulty) {
      const difficultyMap = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return difficultyMap[difficulty]
    },
    formatQuestionType (questionType) {
      const questionTypeMap = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return questionTypeMap[questionType]
    },
    // 获取录入人
    async getUserList () {
      const { data } = await userSimple()
      console.log('录入人', data)
      this.userList = data
    },
    // 获取城市
    async getProvinces () {
      const res = provinces()
      console.log('111', res)
      this.provinces = res
    },
    async pChange (val) {
      console.log(val)
      const res = await citys(val)
      console.log(res)
      this.citys = res
    },
    // 点击清除清空表单中的内容
    clearAll () {
      this.form = {
        subjectID: '', // 学科
        tags: '', // 标签
        catalogID: '', // 目录
        keyword: '', // 关键字
        questionType: '', // 试题类型
        creatorID: '', // 录入人
        direction: '', // 方向
        difficulty: '', // 难度
        remarks: '', // 题目备注
        city: '', // 区
        shortName: '', // 企业简称
        province: ''// 城市
      }
    },
    // 点击搜索按钮刷新下面列表
    async search () {
      const { data } = await list({ subjectID: this.form.subjectID, keyword: this.form.keyword, page: this.form.page, pagesize: this.form.pagesize })
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
      this.getTableList()
    },
    async getTableList () {
      const res = await list(this.form)
      console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    handleSizeChange (newSize) {
      this.form.pagesize = newSize
      this.getTableList()
    },
    handleCurrentChange (newPage) {
      this.form.page = newPage
      this.getTableList()
    },
    // 点击预览打开弹层
    async preview (row) {
      console.log(row)
      this.showQPDialog = true // 显示弹层
      const res = await detail({ id: row.id })
      console.log(res)
      this.list = row
      this.tableList = res.data
      console.log('预览表', this.tableList)
    }
  },
  filters: {
    dateFormat (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style  lang="scss" scoped>
.page {
  float: right;
}
.btn_wrapper {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
.el-icon-sdit::before {
  content: '';
  display: block;
  clear: both;
  height: 0;
  background: rgb(247, 244, 244);
}
</style>
